<template>
    <div ref="shows">
        {{ x }}
        <slot></slot>
        <Teleport to="body">
            <div ref="dialogRef" v-if="show" class="contextmenus" :style="{
    top: y+'px',
    left: x+'px',
        }">
                <ul>
                    <li v-for="item in list" :key="item" @click="openMenu(item, $event)" class="liitem">{{ item }}</li>
                </ul>
            </div>
        </Teleport>
      
    </div>

</template>

<script  setup>
import tets from '@/utils/auto'
import { nextTick, onMounted, watchEffect } from 'vue'
const shows = ref(null)
const dialogRef = ref(null)
// const x = ref(0)
// const y = ref(0)
// const chilckshow= ref(false)
const { x, y, show } = tets(shows, dialogRef)
// const position = shallowRef({ x: 0, y: 0, show: false })
const props= defineProps({
    list:{
        type:Array,
        default: () => [],
        rquired: true
    }
})
const openMenu=(e)=>{
console.log(e)
}

// onMounted(() => {
//     nextTick(() => {
//         const pos = tets(shows.value)
//         position.value = pos
     
        
//     })
   
// })



  

</script>

<style lang="scss" scoped>
                .contextmenus {
            width: 100px;
                margin: 0;
                border: 1px solid #ccc;
                background: #fff;
                z-index: 3000;
                position: fixed;
                list-style-type: none;
                padding: 5px 0;
                border-radius: 4px;
                font-size: 14px;
                color: #333;
                box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
                ul{
                    margin: 0;
                    cursor: pointer;
                    .liitem {
                     list-style: none;
                            padding: 5px;
                            margin: 0;
                            &:hover {
                                background: #FC5632;
                            }
                    
                        
                        }
                }
              
                        }

                    
</style>
